<template>
  <div class="dialog" v-if="visible">
    <div class="cover-area"></div>
    <div class='dialog-area'>
      <div class='dialog-block'>
        <img class='background_img' src="../../../assets/img/zjl2.png" alt="">
        <!-- <a :href="this.pathURL + 'nativeApp/goodsList?title=普药'"><img class='btn' src="../../../assets/img/qsy.png" alt=""></a> -->
        <img class='btn' src="../../../assets/img/qsy.png" alt="" @click='goToGeneral'>
        <img class='x' src="../../../assets/img/x.png" alt="" @click='close'>
        <img class='tip' :src="rewards.url" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      text: '',
      rewards: {
        url: '',
        redirectUrl:this.pathURL+"nativeApp/goodsList?title='普药列表'"
      },
    }
  },
  methods: {
    show(rewards) {
      this.rewards.url = rewards.url
      this.visible = true
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
    
    goToGeneral() {
      const redirectUrl = this.pathURL+"nativeApp/goodsList"
      // window.location.href = redirectUrl;
      window.location.href = this.pathURL + "nativeApp/goodsList?title=普药"
      return
      // window.location.href = this.pathURL + encodeURI(encodeURI("nativeApp/goodsList?title=普药"))
      // window.location.href = this.pathURL + "nativeApp/goodsList?title="+decodeURIComponent('普药');
      // return false
    },
  },
}
</script>

<style lang="less" scoped>
.dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cover-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
}
.dialog-area {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  .dialog-block {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    .background_img {
      width: 160%;
      height: 100%;
    }
    .btn {
      position: absolute;
      width: 120%;
      bottom: 20px;
    }
    .x {
      width: 66px;
      height: 66px;
      position: absolute;
      bottom: -110px;
    }
    .tip {
      position: absolute;
      top: 3.9rem;
      height: 250px;
      width: 250px;
    }
  }
}
</style>